<template>
  <el-container class="main-container">
    <keep-alive>
      <Header :subtitle="subtitle" :header-height="headerHeight" :cover-name="coverName" :mask-title="false" />
    </keep-alive>
    <div class="main">
      <el-row>
        <div class="el-col-24 el-col-md-20 list">
          <el-image
            style="width: 100%;height: 100%"
            :src="img"
            fit="fill"
          />
        </div>
      </el-row>
    </div>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script type="text/ecmascript-6">
import Header from '../components/Header'
import Footer from '../components/Footer'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      subtitle: '404',
      coverName: '/cover/cover7.jpg',
      headerHeight: 100,
      img: require('../assets/images/404.jpg')
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .main-container {
        background-color: #eeeeee;

        .main {
            max-width: 1140px;
            width: 50%;
            padding: 3rem 15px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
            margin-top: -70vh;
            opacity: 0.7;
            background-color: #fff;
            border-radius: .5rem;
            z-index: 3;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
            box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;

            .list {
                float: none;
                margin: auto;
            }
        }
    }
</style>
